<script setup lang="ts">
import { friends } from "../../api/user";
import { onMounted, ref } from "vue";
import { log } from "console";
import {  Friend } from "../../ts/wcf";

const checkFriendAll = ref(false);
const isFriendIndeterminate = ref(true);
var friendsRef = ref([] as string[]);
var friendList = ref([] as Friend[]);

const handleCheckFriendAllChange = (val: boolean) => {
  friendsRef.value = val ? friendList.value.map(v => v.wxid) as string[] : [];
  isFriendIndeterminate.value = false;
};
const handleCheckedFriendChange = (value: string[]) => {
  // const checkedCount = value.length;
  // checkAll.value = checkedCount === cities.length;
  // isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
};

onMounted(() => {
  friends({}).then((data) => {
    friendList.value=data;
    console.log(data);
  });
});
</script>

<template>
  <div>联系人信息</div>

<el-checkbox
    v-model="checkFriendAll"
    :indeterminate="isFriendIndeterminate"
    @change="handleCheckFriendAllChange"
  >
    Check all-- Friend
  </el-checkbox>
  <!-- <el-checkbox-group v-model="chatroomRef" @change="handleCheckedCitiesChange"> -->
  <el-checkbox-group v-model="friendsRef" @change="handleCheckedFriendChange">
    <el-checkbox
      class="checkbox"
      v-for="friend in friendList"
      :key="friend.wxid"
      :label="friend.name"
      :value="friend.wxid"
    >
      {{ friend.name }}
    </el-checkbox>
  </el-checkbox-group>

</template>

<style scoped>
.checkbox {
  display: block;
}
</style>
